<template>
    <div class="guoneireal_time">
    <!-- 大图说明 -->
    <div class="ball">
      <div class="title"> <i class="iconfont icon-location"></i> 中国</div>
      <div class="title">疫情大数据一览</div>
      <div class="title">统计截止2020-9-3-16:10</div>
    </div>
     <div class="first">
      <div>
        <!-- 现有确诊，无症状感染者 -->
        <div id="xyqz_container" style="height:100%;">现有确诊</div>
      </div>
      <div>
        <!-- 国内治愈率 -->
        <div id="zyl_container" style="height:100%;">国内治愈率</div>
      </div>
      <div>
        <!-- 确诊城市TOP10 -->
        <div id="city_container" style="height:100%;">确诊城市TOP10</div>
      </div>
    </div>
     <div class="second">
      <div id="qz_container" style="height:100%;"></div>
    </div>
    </div>
</template>

<script>
export default {
    mounted(){
        //现有确诊无症状感染者
        var chart = Highcharts.chart('xyqz_container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '2020年9月疫情统计'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: ''
        }
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
            }
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>:of total<br/>'
    },
    series: [{
        name: '',
        colorByPoint: true,
        data: [{
            name: '累计确诊',
            y: 90422,
            drilldown: 'Microsoft Internet Explorer'
        }, {
            name: '现有确诊',
            y: 569,
            drilldown: 'Chrome'
        }, {
            name: '累计治愈',
            y: 85122,
            drilldown: 'Firefox'
        }, {
            name: '累计死亡',
            y: 4731,
            drilldown: 'Safari'
        }, {
            name: '境外输入',
            y: 2517,
            drilldown: 'Opera'
        }, {
            name: '疑似确诊',
            y: 0,
            drilldown: null
        }]
    }],
    drilldown: {
        series: [{
            name: '累计确诊',
            id: 'Microsoft Internet Explorer',
            data: [
                [
                    'v11.0',
                    24.13
                ],
                [
                    'v8.0',
                    17.2
                ],
                [
                    'v9.0',
                    8.11
                ],
                [
                    'v10.0',
                    5.33
                ],
                [
                    'v6.0',
                    1.06
                ],
                [
                    'v7.0',
                    0.5
                ]
            ]
        }, {
            name: 'Chrome',
            id: 'Chrome',
            data: [
                [
                    'v40.0',
                    5
                ],
                [
                    'v41.0',
                    4.32
                ],
                [
                    'v42.0',
                    3.68
                ],
                [
                    'v39.0',
                    2.96
                ],
                [
                    'v36.0',
                    2.53
                ],
                [
                    'v43.0',
                    1.45
                ],
                [
                    'v31.0',
                    1.24
                ],
                [
                    'v35.0',
                    0.85
                ],
                [
                    'v38.0',
                    0.6
                ],
                [
                    'v32.0',
                    0.55
                ],
                [
                    'v37.0',
                    0.38
                ],
                [
                    'v33.0',
                    0.19
                ],
                [
                    'v34.0',
                    0.14
                ],
                [
                    'v30.0',
                    0.14
                ]
            ]
        }, {
            name: 'Firefox',
            id: 'Firefox',
            data: [
                [
                    'v35',
                    2.76
                ],
                [
                    'v36',
                    2.32
                ],
                [
                    'v37',
                    2.31
                ],
                [
                    'v34',
                    1.27
                ],
                [
                    'v38',
                    1.02
                ],
                [
                    'v31',
                    0.33
                ],
                [
                    'v33',
                    0.22
                ],
                [
                    'v32',
                    0.15
                ]
            ]
        }, {
            name: 'Safari',
            id: 'Safari',
            data: [
                [
                    'v8.0',
                    2.56
                ],
                [
                    'v7.1',
                    0.77
                ],
                [
                    'v5.1',
                    0.42
                ],
                [
                    'v5.0',
                    0.3
                ],
                [
                    'v6.1',
                    0.29
                ],
                [
                    'v7.0',
                    0.26
                ],
                [
                    'v6.2',
                    0.17
                ]
            ]
        }, {
            name: 'Opera',
            id: 'Opera',
            data: [
                [
                    'v12.x',
                    0.34
                ],
                [
                    'v28',
                    0.24
                ],
                [
                    'v27',
                    0.17
                ],
                [
                    'v29',
                    0.16
                ]
            ]
        }]
    }
});

          //治愈率
         var chart = Highcharts.chart('zyl_container', {
		chart: {
				type: 'pie',
				options3d: {
						enabled: true,
						alpha: 45,
						beta: 0
				}
		},
		title: {
				text: '2020新冠疫情治愈率'
		},
		tooltip: {
				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
				pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						depth: 35,
						dataLabels: {
								enabled: true,
								format: '{point.name}'
						}
				}
		},
		series: [{
				type: 'pie',
				name: '治愈率',
				data: [
						['治愈',  85122 ],
						['死亡',    4731   ],
						['现有确诊', 569   ],
				]
		}]
});
         //确诊城市top10
         var chart = Highcharts.chart('city_container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '新冠确诊人数top10城市'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45  // 设置轴标签旋转角度
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '人口'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: '确诊总量:<b>{point.y}</b>'
    },
    series: [{
        name: '总人口',
        data: [
            ['武汉',50340],
            ['香港',4822],
            ['孝感',3518],
            ['黄冈',2907],
            ['荆州',1580],
            ['鄂州',1394],
            ['随州',1370],
            ['襄阳',1175],
            ['黄石',1015],
            ['宜昌',931],
        ],
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            format: '{point.y}',
            y: 10
        }
    }]
});

     //确诊总数图
     var chart = Highcharts.chart('qz_container', {
    chart: {
        type: 'line'
    },
    title: {
        text: '2020新冠新增确诊数'
    },
    xAxis: {
        categories: ['1.1', '1.15', '2.1', '2.15', '3.1', '3.15', '4.1', '4.15', '5.1', '5.15', '6.1', '6.15', '7.1', '7.15', '8.1', '8.15', '9.1']
    },
    yAxis: {
        title: {
            text: '人数'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                // 开启数据标签
                enabled: true          
            },
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            enableMouseTracking: false
        }
    },
    series: [{
        name: '中国',
        data: [3, 9, 2189, 2343, 461,29 , 93, 52, 3, 9, 9, 45,31,20,180,66,20]
    }]
});
     },

        
        
    }
</script>

<style scoped>
.ball {
  height: 150px;
  background-image: url("../assets/bg3.jpg");
  background-size: cover;
  margin: -.5em;
  margin-bottom: 1em;
  padding: 1em;
  color: #ffffff;
}
.ball > .title {
  line-height: 2em;
  font-size: 20px;
  font-weight: bold;
}
.guoneireal_time > .first {
  display: flex;
  height: 500px;
  text-align: center;
}
.guoneireal_time > .first > div {
  flex: 1;
}
.guoneireal_time > .second {
  height: 500px;
  text-align: center;
}
</style>